let mobileTimer,
	roadTimer,
	bgpX = 0,
	road2,
	road2Sped = 0.0317, //行道的初始移动速度。
	road2CreateTime = 2500, //行道生成的间隔时间
	junpCount = 0, //二段跳计数
	junpBool = true, //二段跳开关
	junpValue = 0, //跳跃高度
	peopleJunpTimer1, //第一次跳跃计时器
	peopleJunpTimer2, //人物跳跃计时器
	peopleDropTimer, //人物下落计时器
	liveCount = 2, //生命数
	isChange = true, //控制二段跳是否改变
	isDrop = true, //下落控制器
	gradeBoxCount = 0, //控制跳过石头
	re = /[0-9\.\-]+/, //获取人物translateY数值的正则
	road1 = document.querySelector('.road1'),
	arr = ['stone', 'logo', 'boy', 'sofa', 'light', 'stool', 'desk', 'logo', 'boy', 'sofa', 'light', 'stool', 'desk',
		'logo', 'boy', 'sofa', 'light', 'stool', 'desk', 'logo', 'boy', 'sofa', 'light', 'stool', 'desk'
	],
	mobileBox = document.querySelector('.mobile-game'),
	road3 = mobileBox.lastChild,
	people = document.querySelector('.people');
//				bottomValue = people.getBoundingClientRect().top + people.offsetHeight;
// 生命个数
function liveChange(num) {
	let liveBox = document.querySelector('.live');
	liveBox.innerHTML = '';
	for(let i = 0; i < num; i++) {
		let span = document.createElement('span');
		liveBox.appendChild(span);
	}
}
// 创建行道元素
function cretaeGradeBox() {
	var road2 = document.createElement('div');
	//随机产生行道的高度
	let topValue = (Math.random() * (5 - 2) + 2).toFixed(2);
	road2.className = 'road2';
	road2.style.bottom = topValue + 'rem';
	mobileBox.appendChild(road2);

	for(let i = 0; i < 3; i++) {
		// 创建分值元素
		let gradeValue = document.createElement('div');
		//随机数组的物品
		let index = Math.floor(Math.random() * arr.length);
		gradeValue.classList.add(arr[index]);
		gradeValue.classList.add('grade-value');

		// 创建分值盒元素
		let gradeBox = document.createElement('div');
		//随机产生物品的高度
		let topValue = (Math.random() * (3.5 - 2) + 2).toFixed(2);
		gradeBox.className = 'grade-box grade-box-' + (i + 1);
		if(index === 0) {
			gradeBox.style.height = '10px';
			topValue = 0.35;
		}
		gradeBox.style.bottom = topValue + 'rem';
		// 嵌套元素
		gradeBox.appendChild(gradeValue)
		road2.appendChild(gradeBox);
	}
}

// 物品移动
function gradeMove(num) {
	let road2 = mobileBox.lastChild,
		leftVCalue = 6.4;
	let movetimer = setInterval(function() {
		if(leftVCalue <= -6.13) {
			clearInterval(movetimer);
			road2.remove();
		}		
		leftVCalue -= num;
		road2.style.transform = 'translateX(' + leftVCalue + 'rem)';
	}, 10)
}
// 无限物品
function infinityRoad() {
	let road1LeftValue = 0;
	road1 = document.querySelector('.road1');
	setInterval(function() {
		
		road2Sped += -0.0001;
		road2CreateTime = Math.floor(120 / road2Sped);
		clearInterval(roadTimer);
		roadTimer = setInterval(function() {
			cretaeGradeBox();
			gradeMove(road2Sped);
		}, 1500)
	}, road2CreateTime);
	if(road1) {
		let road1MoveTimer = setInterval(function() {
			if(road1LeftValue <= -15.34) {
				clearInterval(road1MoveTimer);
				road1.remove();
			}
			road1LeftValue -= road2Sped;
			road1.style.transform = 'translateX(' + road1LeftValue + 'rem)';
		}, 10);
	}

}
infinityRoad();

// 判断人物是否碰撞
function isPeopleImpact(ele) {
	let
		people = document.querySelector('.people'),
		//获取人物的left
		xValuePeople = people.getBoundingClientRect().x,
		//获取人物的top
		yValuePeople = people.getBoundingClientRect().y,
		topValuePeople = yValuePeople,
		//获取人物的left和人物的宽度
		rightValuePeople = xValuePeople + people.offsetWidth,
		//获取人物的top和人物的高度
		bottomValuePeople = yValuePeople + people.offsetHeight,
		leftValuePeople = xValuePeople;
	//获取行道的left
	xValueElement = ele.getBoundingClientRect().x,
		//获取行道的top
		yValueElement = ele.getBoundingClientRect().y,
		topValueElement = yValueElement,
		//获取行道的left和行道的宽度
		rightValueElement = xValueElement + ele.offsetWidth,
		//获取行道的top和行道的高度
		bottomValueElement = yValueElement + ele.offsetHeight,
		leftValueElement = xValueElement;
	// 判断是否站在横杆上
	if(ele.className === 'road1') {
		if(rightValuePeople >= leftValueElement && leftValuePeople <= rightValueElement + 5) {
			if(bottomValuePeople <= topValueElement + 2 && bottomValuePeople >= topValueElement - 5) {
				if(isChange) {
					clearInterval(peopleDropTimer);
					isChange = false;
					junpBool = true;
					junpCount = 0;
					isDrop = true;
				}
			}
		} else {
			if(isDrop) {
				isDrop = false;
				peopleDrop();
			}
		}
	} else if(ele.className === 'road2') {
		if(leftValuePeople >= leftValueElement  && leftValuePeople <= rightValueElement ) {
			if(bottomValuePeople <= topValueElement  && bottomValuePeople >= topValueElement ) {
				if(isChange) {
					clearInterval(peopleDropTimer);
					isChange = false;
					junpBool = true;
					junpCount = 0;
					isDrop = true;
				}
			}
		} else {
			if(isDrop) {
				isDrop = false;
				peopleDrop();
			}
		}
	}
}
// 实时监测人物
function monitorPeople() {
	peopleTimer = setInterval(function() {
		road1 = document.querySelector('.road1');
		if(road1) {
			isPeopleImpact(road1);
		} else {
			let road2 = document.querySelectorAll('.road2');
			console.log(road2)
			for(var i=0;i<road2.length;i++) {
				if(road2[i]) {
					isPeopleImpact(road2[i]);
				}
			}

		}

	}, 1);
}
monitorPeople();
//人物跳跃
function peopleJunp() {
	if(junpBool) {
		// 清除此前的跳跃以及下落计时器，并将下落开关关闭，二段跳改变开关关闭
		isChange = false;
		isDrop = false;
		clearInterval(peopleJunpTimer1);
		clearInterval(peopleDropTimer);
		if(peopleJunpTimer2) {
			clearInterval(peopleJunpTimer2);
		}
		people = document.querySelector('.people');
		// 在第一次跳到基础上进行跳跃
		if(people.style.transform) {
			people = document.querySelector('.people');
			// 获取到此时的人物的translateY的值;
			str = people.style.transform.match(re)[0];
			//因为是字符串要转换成数字
			junpValue = Number(str);
			let junpValueCount = 0;
			setTimeout(function() {
				junpValueCount++;
				junpValue -= 0.115;
				junpValue = Number(junpValue.toFixed(3));
				people.style.transform = 'translateY(' + junpValue + 'rem)';
			}, 0);
			peopleJunpTimer2 = setInterval(function() {
				// 跳跃结束
				if(junpValueCount >= 20) {
					clearInterval(peopleJunpTimer2);
					peopleDrop();
				} else {
					junpValueCount++;
					junpValue -= 0.115;
					junpValue = Number(junpValue.toFixed(3));
					people.style.transform = 'translateY(' + junpValue + 'rem)';
				}
			}, 20);
		} else {
			// 第一次跳跃
			setTimeout(function() {
				//junpValue初始为0
				junpValue += 0.115;
				//进行字符串转换数字
				junpValue = Number(junpValue.toFixed(3));
				people.style.transform = 'translateY(-' + junpValue + 'rem)';
			}, 0);
			peopleJunpTimer1 = setInterval(function() {
				// 跳跃结束
				if(junpValue >= 2.3) {
					clearInterval(peopleJunpTimer1);
					peopleDrop();
				} else {
					junpValue += 0.115;
					junpValue = Number(junpValue.toFixed(3));
					people.style.transform = 'translateY(-' + junpValue + 'rem)';
				}
			}, 20);
		}
		// 二段跳控制
		junpCount++;
		if(junpCount === 2) {
			junpBool = false;
			junpCount = 0;
		}
	}
}
// 人物下落
function peopleDrop() {
	isChange = true;
	let
		dropValue,
		people = document.querySelector('.people');
	if(people.style.transform) {
		// 获取到此时的人物的translateY的值;
		str = people.style.transform.match(re)[0];
		dropValue = Number(str)
	} else {
		// 未跳跃就下落
		dropValue = 0;
	}
	setTimeout(function() {
		dropValue += 0.115;
		dropValue = Number(dropValue.toFixed(3));
		people.style.transform = 'translateY(' + dropValue + 'rem)';
		people = document.querySelector('.people');
	}, 0);
	peopleDropTimer = setInterval(function() {
		if(dropValue >= 5.5) {
			clearInterval(peopleDropTimer);
			isDrop = true;
			people.style.transform = 'translateY(' + (-8) + 'rem)';
			liveCount--;
			if(liveCount === -1) {
				window.location.href = "../gameover.html";
			} else {
				liveChange(liveCount);
			}
		} else {
			dropValue += 0.115;
			dropValue = Number(dropValue.toFixed(3));
			people.style.transform = 'translateY(' + dropValue + 'rem)';
			people = document.querySelector('.people');
		}
	}, 20);
}
mobileBox.addEventListener('click', peopleJunp);